<!DOCTYPE html>
<html>
    
    <head>
        <title>输入引导模块</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <meta name="descriptions" content="这是ms-duplex2.0的一个扩展模块，用于引导用户输入。
通过如下方式使用:
<input ms-duplex-mask=&quot;a&quot; data-duplex-mask=&quot;((00/00其他字符0000)&quot; />

 ">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../highlight/shCore.js"></script>
    </head>
    
    <body>
        <div class="wrapper">
            <h2>mask</h2>
            <fieldset>
                <legend>输入引导模块</legend>
                <p>这是ms-duplex2.0的一个扩展模块，用于引导用户输入。</p>
                <p>通过如下方式使用:</p>
                <pre class="brush:html;gutter:false;toolbar:false;">&lt;input ms-duplex-mask="a" data-duplex-mask="((00/00其他字符0000)" /&gt;</pre>
            </fieldset>
            <table class="table-doc" border="1">
                <colgroup>
                    <col width="180">
                        <col width="95">
                            <col width="120">
                </colgroup>
                <tbody>
                    <tr>
                        <th>名字</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td align="center" colspan="4">配置参数</td>
                    </tr>
                    <tr>
                        <td>element</td>
                        <td>Element</td>
                        <td>element</td>
                        <td>组件实例要作用的input元素</td>
                    </tr>
                    <tr>
                        <td>dataMask</td>
                        <td>String</td>
                        <td>dataMask</td>
                        <td>用户在input/textarea元素上通过data-duplex-mask定义的属性值</td>
                    </tr>
                    <tr>
                        <td>placehoder</td>
                        <td>Boolean</td>
                        <td>"_"</td>
                        <td>"_", 将元字符串换为"_"显示到element.value上，如99/99/9999会替换为__/__/____，可以通过data-duplex-mask-placehoder设置</td>
                    </tr>
                    <tr>
                        <td>hideIfInvalid</td>
                        <td>Boolean</td>
                        <td>false</td>
                        <td>false, 如果它不匹配就会在失去焦点时清空value(匹配是指所有占位符都被正确的字符填上)，可以通过data-duplex-mask-hide-if-invalid设置</td>
                    </tr>
                    <tr>
                        <td>hideIfPristine</td>
                        <td>Boolean</td>
                        <td>true</td>
                        <td>true如果它没有改动过就会在失去焦点时清空value，可以通过data-duplex-mask-hide-if-pristine设置</td>
                    </tr>
                    <tr>
                        <td>showIfHover</td>
                        <td>Boolean</td>
                        <td>false</td>
                        <td>false 当鼠标掠过其元素上方就显示它出来，可以通过data-duplex-mask-show-if-hover设置</td>
                    </tr>
                    <tr>
                        <td>showIfFocus</td>
                        <td>Boolean</td>
                        <td>true</td>
                        <td>true 当用户让其元素得到焦点就显示它出来，可以通过data-duplex-mask-show-if-focus设置</td>
                    </tr>
                    <tr>
                        <td>showAlways</td>
                        <td>Boolean</td>
                        <td>false</td>
                        <td>false 总是显示它，可以通过data-duplex-mask-show-always设置</td>
                    </tr>
                    <tr>
                        <td>translations</td>
                        <td>Object</td>
                        <td></td>
                        <td>此对象上每个键名都是元字符，都对应一个对象，上面有pattern(正则)，placehoder(占位符，如果你不想用"_")</td>
                    </tr>
                </tbody>
            </table>
            <table class="table-doc" border="1">
                <colgroup>
                    <col width="190">
                </colgroup>
                <tbody>
                    <tr>
                        <th>元字符</th>
                        <th>意义</th>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>表示任何数字，0-9，正则为/\d/</td>
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>表示任何字母，，正则为/[a-zA-Z]/</td>
                    </tr>
                    <tr>
                        <td>*</td>
                        <td>表示任何非空字符，正则为/\S/</td>
                    </tr>
                </tbody>
            </table>
            <h3 class="table-doc-title">使用说明</h3>
            <table class="table-doc" border="1">
                <colgroup>
                    <col width="180">
                        <col width="95">
                            <col width="120">
                </colgroup>
                <tbody>
                    <tr>
                        <th>名字</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td align="center" colspan="4">配置参数</td>
                    </tr>
                    <tr>
                        <td>element</td>
                        <td>Element</td>
                        <td>element</td>
                        <td>组件实例要作用的input元素</td>
                    </tr>
                    <tr>
                        <td>dataMask</td>
                        <td>String</td>
                        <td>dataMask</td>
                        <td>用户在input/textarea元素上通过data-duplex-mask定义的属性值</td>
                    </tr>
                    <tr>
                        <td>placehoder</td>
                        <td>Boolean</td>
                        <td>"_"</td>
                        <td>"_", 将元字符串换为"_"显示到element.value上，如99/99/9999会替换为__/__/____，可以通过data-duplex-mask-placehoder设置</td>
                    </tr>
                    <tr>
                        <td>hideIfInvalid</td>
                        <td>Boolean</td>
                        <td>false</td>
                        <td>false, 如果它不匹配就会在失去焦点时清空value(匹配是指所有占位符都被正确的字符填上)，可以通过data-duplex-mask-hide-if-invalid设置</td>
                    </tr>
                    <tr>
                        <td>hideIfPristine</td>
                        <td>Boolean</td>
                        <td>true</td>
                        <td>true如果它没有改动过就会在失去焦点时清空value，可以通过data-duplex-mask-hide-if-pristine设置</td>
                    </tr>
                    <tr>
                        <td>showIfHover</td>
                        <td>Boolean</td>
                        <td>false</td>
                        <td>false 当鼠标掠过其元素上方就显示它出来，可以通过data-duplex-mask-show-if-hover设置</td>
                    </tr>
                    <tr>
                        <td>showIfFocus</td>
                        <td>Boolean</td>
                        <td>true</td>
                        <td>true 当用户让其元素得到焦点就显示它出来，可以通过data-duplex-mask-show-if-focus设置</td>
                    </tr>
                    <tr>
                        <td>showAlways</td>
                        <td>Boolean</td>
                        <td>false</td>
                        <td>false 总是显示它，可以通过data-duplex-mask-show-always设置</td>
                    </tr>
                    <tr>
                        <td>translations</td>
                        <td>Object</td>
                        <td></td>
                        <td>此对象上每个键名都是元字符，都对应一个对象，上面有pattern(正则)，placehoder(占位符，如果你不想用"_")</td>
                    </tr>
                </tbody>
            </table>
            <h3 class="table-doc-title">使用说明</h3>
            <table class="table-doc" border="1">
                <colgroup>
                    <col width="190">
                </colgroup>
                <tbody>
                    <tr>
                        <th>元字符</th>
                        <th>意义</th>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>表示任何数字，0-9，正则为/\d/</td>
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>表示任何字母，，正则为/[a-zA-Z]/</td>
                    </tr>
                    <tr>
                        <td>*</td>
                        <td>表示任何非空字符，正则为/\S/</td>
                    </tr>
                </tbody>
            </table>
            <ul class="example-links">
                <li>
                    <a href="avalon.mask.ex1.html">例子1</a>
                </li>
                <li>
                    <a href="avalon.mask.ex2.html">例子2</a>
                </li>
                <li>
                    <a href="avalon.mask.ex3.html">例子3</a>
                </li>
            </ul>
        </div>
    </body>

</html>